<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_803308_ywwjyrjeul.css">
    <link rel="stylesheet" href="css/伪元素实现边框.css">
    <link rel="stylesheet" href="css/鼠标经过换内容.css">
    <link rel="stylesheet" href="css/三行框.css">
    <link rel="stylesheet" href="css/两行框.css">
    <link rel="stylesheet" href="css/一行框.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" type="image/x-icon" href="images/ico/tiger18.ico" >
    <title>锤子官网</title>
    <style>
    </style>
</head>

<body>
    <!-- 导航开始 -->
    <div class="nav">
        <div class="nav-all center">
            <div class="nav-left">
                <img src="images/logo.gif" alt="">
            </div>
            <div class="nav-center">
                <a href="#">在线商城</a>
                <a href="#">Smartisan M1/M1L</a>
                <a href="#">Smartisan OS</a>
                <a href="#">欢喜云</a>
                <a href="#">应用下载</a>
                <a href="#">官方论坛</a>
            </div>
            <div class="nav-right">
                <div class="nav-line">

                </div>
                <button type="button" class="nav-btn">登入</button>
            </div>
        </div>
    </div>
    <!-- 导航结束 -->

    <!-- 内容区域 start -->
    <div class="container center">
        <!-- 种类栏开始 -->
        <div class="kind">
            <div class="kind-left">
                <a href="#">精选</a>
                <a href="#">手机</a>
                <a href="#">耳机/音响</a>
                <a href="#">背壳/保护套</a>
                <a href="#">情怀/背壳</a>
                <a href="#">其他周边</a>
                <a href="#">保修服务</a>
                <a href="#">全部商品</a>
            </div>
            <div class="shop-car">
                <!-- <div class="row drop"> -->
                <i class="iconfont icon-gouwuchekong"></i>
                <div class="car">购物车</div>
                <i class="iconfont icon-0">
                    <div class="drop-content information  none">
                        <img src="images/spcart1.png" alt="">
                        <p>购物车为空</p>
                        <span>你还没有选购任何商品，现在前往商城选购吧</span>
                    </div>
                </i>
                <!-- </div> -->
            </div>
        </div>
        <!-- 种类栏结束 -->

        <!-- 大图片开始 -->
        <div class="big-photo">
            <img src="images/index_03.png" alt="锤子科技">
        </div>
        <!-- 大图片结束 -->

        <!-- 四个图开始 -->
        <div class="box">
            <div class="xiaoming"></div>
            <div class="chicken"></div>
            <div class="phone"></div>
            <div class="pc"></div>
        </div>
        <!-- 四个图结束 -->

        <!-- 热门商品开始 -->
        <div class="parent">
            <div class="hot">
                <p>热门商品</p>
            </div>
            <div class="hot-panel">
                <ul>
                    <li>
                        <img src="images/5-1.jpg" />
                        <h2>Smartisan 坚果自拍杆</h2>
                        <p>通用 3.5 mm 接口、航空铝合金伸缩杆</p>
                        <div class="finder">
                            <img src="images/list01.jpg" />
                        </div>
                        <span class="price">￥69.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/5-2.jpg" />
                        <h2>《深泽直人》</h2>
                        <p>首次向中国读者介绍其作品</p>
                        <div class="finder">
                        </div>
                        <span class="price">￥199.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/5-3.jpg" />
                        <h2>Smartisan M1/M1L 软胶保护套</h2>
                        <p>TPU环保材质、细腻防滑、防油污</p>
                        <div class="finder">
                            <img src="images/list01.jpg" />
                            <img src="images/list02.jpg" />
                        </div>
                        <span class="price">￥49.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/5-4.jpg" />
                        <h2>Smartisan S-100 半入耳式耳机</h2>
                        <p>卓越的 14.2mm 发音单元、三按键式线控</p>
                        <div class="finder">
                            <img src="images/list01.jpg" />
                            <img src="images/list02.jpg" />
                            <img src="images/list01.jpg" />
                        </div>
                        <span class="price">￥69.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 热门商品结束 -->

        <!-- 官方精选开始 -->
        <div class="parent">
            <div class="hot">
                <p>官方精选</p>
            </div>
            <div class="official-selection">
                <ul>
                    <li class="advance">
                        <!-- <img src="images/6-1.jpg" /> -->
                    </li>
                    <li>
                        <img src="images/6-2.jpg" />
                        <h2>Smartisan 原装快充充电器</h2>
                        <p>24W 极速快充、兼容 QC3.0和PE+2.0</p>
                        <div class="finder">
                            <img src="images/list01.jpg" />
                        </div>
                        <span class="price">￥69.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/6-3.jpg" />
                        <h2>Smartisan 二合一数据线 0.2m/1.5m</h2>
                        <p>Type-C & Micro-USB双接口、夜间微光灯</p>
                        <div class="finder">
                        </div>
                        <span class="price">￥39.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/6-4.jpg" />
                        <h2>Smartisan 卫衣 老友记</h2>
                        <p>纪念老友记首播</p>
                        <div class="finder">
                            <img src="images/list01.jpg" />
                        </div>
                        <span class="price">￥249.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/6-5.jpg" />
                        <h2>Smartisan 卫衣 皇帝的新装</h2>
                        <p>纪念安徒生出版第一部童话集</p>
                        <div class="finder">
                        </div>
                        <span class="price">￥249.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/6-6.jpg" />
                        <h2>Micro-USB至Type-C转接头×2</h2>
                        <p>即插即用、全面兼容</p>
                        <div class="finder">
                            <img src="images/list01.jpg" />
                        </div>
                        <span class="price">￥29.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/6-7.jpg" />
                        <h2>Smartisan S-1000耳机</h2>
                        <p>VSONIC创始人全程参与调音</p>
                        <div class="finder">
                            <img src="images/list01.jpg" />
                            <img src="images/list02.jpg" />
                            <img src="images/list01.jpg" />
                        </div>
                        <span class="price">￥199.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 官方精选结束 -->

        <!-- 品牌精选开始 -->
        <div class="brand-parent">
            <div class="hot">
                <p>品牌精选</p>
            </div>
            <div class="official-selection">
                <ul>
                    <li class="brand">
                    </li>
                    <li>
                        <img src="images/5-2.jpg" />
                        <h2>《深泽直人》</h2>
                        <p>首次向中国读者介绍其作品</p>
                        <div class="finder">
                        </div>
                        <span class="price">￥199.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/7-3.jpg" />
                        <h2>《日本制造》</h2>
                        <p>盛田昭夫的日式经营学</p>
                        <div class="finder">
                        </div>
                        <span class="price">￥58.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/7-4.jpg" />
                        <h2>FIIL Diva 智能蓝牙无线降噪耳机</h2>
                        <p>手势触控、智能启停</p>
                        <div class="finder">
                            <img src="images/list01.jpg" />
                            <img src="images/list02.jpg" alt="">
                        </div>
                        <span class="price">￥999.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/7-5.jpg" />
                        <h2>车听宝</h2>
                        <p>点播式车载广播电台、WIFI直连技术</p>
                        <div class="finder">
                            <img src="images/list01.jpg" />
                        </div>
                        <span class="price">￥199.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/7-6.jpg" />
                        <h2>《深泽直人》</h2>
                        <p>首次向中国读者介绍其作品</p>
                        <div class="finder">
                            <img src="images/list01.jpg" />
                            <img src="images/list02.jpg" alt="">
                            <img src="images/list01.jpg" />
                            <img src="images/list02.jpg" alt="">
                        </div>
                        <span class="price">￥1699.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                    <li>
                        <img src="images/7-7.jpg" />
                        <h2>《深泽直人》</h2>
                        <p>首次向中国读者介绍其作品</p>
                        <div class="finder">
                            <img src="images/list01.jpg" />
                            <img src="images/list02.jpg" />
                            <img src="images/list01.jpg" />
                            <img src="images/list02.jpg" />
                        </div>
                        <span class="price">￥119.00</span>
                        <div class="shoping">
                            <a href="javascript: ;" class="details">查看详情</a>
                            <a href="javascript: ;" class="join-cart">加入购物车</a>
                        </div>
                        <a href="javascript: ;"></a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 品牌精选结束 -->

        <!-- 锤子科技动态开始 -->
        <div class="hot-1">
            <p>锤子科技动态</p>
        </div>
        <div class="box-1">
            <div class="m1"></div>
            <div class="m2"></div>
            <div class="m3"></div>
            <div class="m4"></div>
        </div>
        <!-- 锤子科技动态结束 -->

        <!-- 锤子应用开始 -->
        <div class="chuzi_app">
            <h1>锤子应用 <a href="javascript: ;" class="application">全部应用></a></h1>
            <ul>
                <li>
                <img src="images/9-1.jpg" />
                <h6>HandShaker</h6>
                <p>在 Mac 和 Windows 电脑上也可以方便自如地
                    管理你在 Android 手机中的内容</p>
                <div class="app_log"><img src="images/9-5.jpg" /></div>
                <a href="javascript: ;"></a>
                <div class="app_h">
                <a href="javascript: ;" id="aa" class="y9-div-a">
                    <span class="y9-div-button" id="y9-div-button-1"></span>
                    <span class="y9-div-text">下载windows版安装文件</span>
                </a>
                <a href="javascript: ;" class="y9-div-a">
                    <span class="y9-div-button" id="y9-div-button-2"></span>
                    <span class="y9-div-text">下载Mac版安装文件</span>
                </a>
                <span><a href="javascript: ;" class="a_color">进一步了解HandShaker ></a></span>
                </div>
                </li>
                
                <li><img src="images/9-2.jpg"/><h6>锤子便签</h6>
                <p>雅致的信纸、精心调整的文字排版
                        这可能是最让人想写字的便签应用</p>
                <div class="app_log"><img src="images/9-6.jpg" /></div>
                <a href="javascript: ;"></a>
                <div class="app_h">
                <img src="images/9-8.jpg" />
                <p>扫二码下载锤子标签</p>
                <span><a href="javascript: ;" class="a_color">进一步了解HandShaker ></a></span>
                </div>
                </li>
                
                <li><img src="images/9-3.jpg"/><h6>锤子桌面</h6>
                <p>它示范了何为“美观、易用和人性化”</p>
                <div class="app_log"><img src="images/9-7.jpg" /></div>
                <a href="javascript: ;"></a>
                <div class="app_h">
                <img src="images/9-8.jpg" />
                <p>扫二码下载锤子标签</p>
                <span><a href="javascript: ;" class="a_color">进一步了解HandShaker ></a></span>
                </div>
                </li>
                
                <li><img src="images/9-4.jpg"/><h6>锤子科技论坛</h6>
                <p>是一个科技论坛<br />
                不只是科技论坛</p>
                <div class="app_log"><img src="images/9-7.jpg" /></div>
                <a href=""></a>
                <div class="app_h">
                <img src="images/9-8.jpg" />
                <p>扫二码下载锤子标签</p>
                <span><a href="javascript: ;" class="a_color">进一步了解HandShaker ></a></span>
                </div>
                </li>
            </ul>
            
            </div>             
        <!-- 锤子应用结束 -->

        <!-- 论坛精选开始 -->
        <div class="hot-1">
            <p>论坛精选</p>
            <button>前往论坛></button>
        </div>
        <div class="box-2">
            <div class="center ">
                <img src="images/10_1.png" alt="">
                <h2>“人造人罗永浩”为您介绍 <br />&nbsp;&nbsp;Smartisan OS</h2>
                <p>超高效的手机桌面，加上大幅提升工作效率的<br />One Step（一步）和 Big Bang（大爆炸...</p>
                <a href="#">阅读全文></a>
            </div>    
            <div class="center">
                <img src="images/10_2.png" alt="">
                <h2>锤科最有出息的孩子——M1评测</h2>
                <br>
                <p>M1到底好不好用？手感如何？续航怎么样？<br/>这一篇锤友的使用评测将解答你所有关于...</p>
                <a href="#">阅读全文></a>
            </div>    
            <div class="center">
                <img src="images/10-3.jpg" alt="">
                <h2>细节之美Smartisan M1L 咖啡金·<br />皮革版「图赏」</h2>
                <p>看着几张图，也许会不自觉底屏住呼吸。</p>
                <br />
                <a href="#">阅读全文></a>
            </div>    
            <div class="center">
                <img src="images/10-4.jpg" alt="">
                <h2>【今日话题】来论坛和锤友一起聊<br />聊</h2>
                <p>没事来论坛和一群趣味相投的锤友，坐下来打<br />开脑洞，一起天马星空地聊聊。话题每周更...</p>
                <a href="#">阅读全文></a>
            </div>    
        </div>   
        <!-- 论坛精选结束 -->      
    </div>
    <!-- 内容区域 end -->

    <!-- 尾部开始 -->
    <div class="footer">
        <div class="footer-top center">
            <table>
                <tr>
                    <th>订单服务</th>
                    <th>服务支持</th>
                    <th>自主服务</th>
                    <th>媒体中心</th>
                    <th>关于公司</th>
                    <th>关注我们</th>
                </tr>
                <tr>
                    <td><a href="#">购买指南</a></td>
                    <td><a href="#">售后服务</a></td>
                    <td><a href="#">热点咨询</a></td>
                    <td><a href="#">新闻动态</a></td>
                    <td><a href="#">公司简介</a></td>
                    <td><a href="#">新浪微博</a></td>
                </tr>
                <tr>
                    <td><a href="#">支付方式</a></td>
                    <td><a href="#">维修门店</a></td>
                    <td><a href="#">预约购买</a></td>
                    <td><a href="#">官方视频</a></td>
                    <td><a href="#">加入我们</a></td>
                    <td><a href="#">官方微信</a></td>
                </tr>
                <tr>
                    <td><a href="#">送货政策</a></td>
                    <td><a href="#">零售门店</a></td>
                    <td><a href="#">订单物流</a></td>
                    <td><a href="#">图片资源</a></td>
                    <td><a href="#">联系我们</a></td>
                    <td><a href="#">官方贴吧</a></td>
                </tr>
            </table>
            <div class="contact">
                <h2>400-619-0909</h2>
                <p>周一至周日 9:00-18:00（仅收市话费）</p>
                <button>
                    <i class="iconfont icon-wenhao help"></i>
                    <p>在线帮助</p>
                </button>
            </div>
        </div>
        <div class="footer-bottom center">
            <div class="footer-left">
                <div class="up">
                    <span>Copyright © 2017, Smartisan Digital Co., Ltd. All Rights Reserved.北京锤子数码科技有限公司</span>
                    <a href="#">&nbsp;&nbsp;&nbsp;法律声明</a>
                    <a href="#">&nbsp;&nbsp;&nbsp;隐四条款</a>
                    <a href="#">&nbsp;&nbsp;&nbsp;开发者中心</a>
                </div>
                <div class="down">
                    <a href="">京ICP备14041720号-1&nbsp;&nbsp;</a>
                    <a href="">京ICP证140622号&nbsp;&nbsp;</a>
                    <a href="">11010502025474</a>
                </div>
            </div>
            <div class="footer-right">
                <div class="language">
                    <div class="zh">中文<span></span></div>
                    <div class="en">English</div>
                </div>      
            </div>
        </div>

    </div>
    <!-- 尾部结束 -->

</body>

</html>